<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <link rel="stylesheet" href="/css/login-form.css"/>
</head>
<body>
    <form class="form">
        <fieldset>
            <legend>用户名密码登录</legend>
            <div class="row">
                <label for="username">用户名：</label>
                <input id="username" type="text" name="username" placeholder="用户名"/>
            </div>
            <div class="row">
                <label for="password">密码：</label>
                <input id="password" type="password" name="password"  placeholder="密码"/>
            </div>
            <div class="row">
                <div class="btn btn-primary">登  录</div>
            </div>
        </fieldset>
    </form>
    <script type="text/javascript">
        window.onload = function () {
            const form = document.querySelector(".form")
            const btn = form.querySelector(".btn");
            btn.onclick=function(){

                const username = form.querySelector("#username")
                const password = form.querySelector("#password")

                const formdata = new FormData()
                formdata.append("username",username.value)
                formdata.append("password",password.value)

                // let str =  'username=' + encodeURIComponent(username.value)+ '&password=' + encodeURIComponent(password.value);
                //创建XMLHttpRequest对像
                let xmlhttp = null;
                if (window.XMLHttpRequest){
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }else{
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //建立连接
                xmlhttp.open("post","/admin/add-one-user.do",'async');
                //设置请求头
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                //发送请求（string在post时使用）
                xmlhttp.send(formdata);
                //xmlhttp.send(str);

                //接收响应信息
                xmlhttp.onreadystatechange=function(){
                    if (xmlhttp.readyState===4 && xmlhttp.status === 200){
                        console.log(xmlhttp.responseText);//响应的数据
                    }
                }
            }
        }
    </script>
</body>
</html>
